<template>
    <div>
		<div class="crumbs">
		    <el-breadcrumb separator="/">
		        <el-breadcrumb-item>
		            <i class="el-icon-lx-cascades"></i> 户档统计
		        </el-breadcrumb-item>
		    </el-breadcrumb>
		</div>
		<div class="container">
			<div class="cate_list">
				<span class="cate_title">家庭类别:</span>
				<div class="cate_sum">
					<div class="cate_item" v-for="(item,index) in cateTotal" :key="index">
						<span>{{item.key}}:</span>
						<span>{{item.value}}人</span>
					</div>
				</div>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable">
				<el-table-column prop="index" label="序号">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column prop="name" label="村名"></el-table-column>
				<el-table-column prop="home" label="户数"></el-table-column>
				<el-table-column prop="num" label="人数"></el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="pageIndex"
					:page-size="pageSize"
					:total="pageTotal"
					@current-change="pagination">
				</el-pagination>
			</div>
		</div>
    </div>
	
</template>

<script>

export default {
    name: 'HamletTotal',
    data() {
        return {
            tableData: [],
			pageIndex: 1,
			pageSize: 10,
			pageTotal: 0,
			cateTotal:[]
        };
    },
    created() {
		this.getTotal()
		this.getCateTotal()
    },
    methods: {
        getTotal() {
			let t = this
			t.$apiPost('Hamlet/totals', {page: this.pageIndex, size: this.pageSize}).then(res => {
				if(res.code == 1) {
					this.tableData = res.data.list
				} else {
					this.$message.error(res.msg)
				}
				this.pageTotal = res.data.pageTotal
			})
        },  
		getCateTotal() {
			let t = this
			t.$apiPost('Hamlet/cateTotal').then(res => {
				if(res.code == 1) {
					this.cateTotal = res.data
				}
			})
		},
		pagination (e) {
			this.pageIndex = e
			this.getTotal()
		}
    }
};
</script>
<style scoped>
	.cate_list{
		margin: 20px auto;
	}
	.cate_title{
		margin-bottom: 20upx;
	}
	.cate_sum{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.cate_item{
		display: flex;
		align-items: center;
		margin: 10px;
		font-size: 14px;
	}
.cate_list{
	margin: 20px auto;
}
.cate_title{
	margin-bottom: 20upx;
}
.cate_sum{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.cate_item{
	display: flex;
	align-items: center;
	margin: 10px;
	font-size: 14px;
}
.goNew{
	color: #2e6bd9;
	cursor: pointer;
}
.handle-box {
    margin-bottom: 10px;
}
.handle-select {
    width: 120px;
}
.handle-input {
    width: 200px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr5{
	margin-right: 1px;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
